<template>
  <div class="digital-cockpit">
    <!-- 顶部导航 -->
    <van-nav-bar
        title="订阅明细"
        left-arrow
        @click-left="goBack"
        class="nav-bar"
    />

    <div
        class="subscription-card"
        v-for="(item, index) in SubscriptionDetailslist"
        :key="index"
    >
      <van-swipe-cell>
<!--        <div class="card-top">-->
<!--          &lt;!&ndash; API标签 &ndash;&gt;-->
<!--          <span class="api-badge">{{ item.name }}</span>-->
<!--          &lt;!&ndash; 订阅名称 &ndash;&gt;-->
<!--          <span class="card-title">{{ item.realname }}</span>-->
<!--        </div>-->
        <div class="digital-header">
          <div class="header-left">
            <van-image
                :src="getIcon()"
                alt="avatar"
                class="avatar"
                round
            />
            <div class="title-info">
              <h1 class="digital-title">{{ item.name }}</h1>
              <span class="digital-title2">{{ item.realname }}</span>
            </div>
          </div>
        </div>
      </van-swipe-cell>
    </div>


  </div>
</template>

<script>
import { getAction } from '@/api'
export default {
  name: "index",
  data() {
    return {
      SubscriptionDetailslist: [],
    }
  },
  mounted() {
    this.init()
  },
  methods:{
    getIcon(){
      return require('@/assets/mark.png');
    },
    init(){
      getAction('/sys/cockpitabilitymarket/SubscriptionDetails',{id:this.$route.params.id}).then(res=>{
        this.SubscriptionDetailslist=res.result;
      })
    },
    goBack() {
      // let param={
      //   activeTab:1
      // }
      // this.$router.push({name: 'test', params: param})
      this.$router.go(-1);
    },
  }
}
</script>

<style scoped>
::v-deep .van-nav-bar__content{
  background: #F4FCFF;
}
.avatar {
  width: 30px;
  height: 30px;
  margin-right: 12px;
  margin-left: 10px;
}
/* 数字人标题区域 */
.digital-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
}

.title-info {
  min-width: 0;
}
.digital-title {
  font-size: 16px;
  font-weight:400;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.digital-title2 {
  position: relative;
  top: -5px;
  font-size: 15px;
  font-weight: 500;
  color: #c0c4c8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/deep/.van-divider{
  margin: 8px 0px 8px 0px;
}
/deep/.van-button--square {
  height: 100%;
}
.delete-button {
  height: 100%;
}
/deep/ .van-nav-bar__text{
  color: #27C2AD !important;
}
.digital-cockpit{
  background: linear-gradient(180deg, #F4FCFE, #fff);
  /*background-color: #f4f8f9;*/
  min-height: 100vh;
}
.subscription-card {
  margin: 12px;
  background-color: #ffffff; /* 卡片半透背景 */
  border: 1px solid #ffffff; /* 青绿色边框（半透） */
  border-radius: 8px;
  padding: 2px;
  margin-bottom: 16px; /* 卡片之间的间距 */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 实现左右布局 */
  flex-wrap: nowrap; /* 防止换行 */
  gap: 8px; /* 标签和标题之间的间距，可根据实际效果调整 */

}
.api-badge {
  background-color: orange; /* 金色标签背景 */
  color: #ffffff; /* 标签文字颜色 */
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}
.card-title {
  color: #000000;
  font-weight: 540;
  flex-grow: 1; /* 占据剩余空间 */
}
.card-desc {
  color: #8F959E;
  opacity: 0.8; /* 文字淡显效果 */
  line-height: 1.4;
}
.card-action {
  display: flex;
}

</style>
